import Taro, {Component, Config} from '@tarojs/taro'
import { Button, View, ScrollView } from '@tarojs/components'
import './index.scss'
import '@/styles/common/goods-info.scss'
import { getSharePath } from "@/utils/storage"
import { filterGoodsInfo } from "@/utils/filter"
import { toGoodsPage } from '@/utils/page_router'
import { getCommentInfo, getCommentPage } from '@/api/commentApi'
import GoodsFoot from "@/components/goods/goods-foot"
import CommentItem from '@/components/comment/comment-item/index'
import { Loading, CommentCarousel, CommentSeeMore } from '@/components/index'

export default class Index extends Component {
  state: any
  config: Config = {
    backgroundTextStyle: "dark",
    navigationBarTitleText: '口碑好评',
    navigationBarTextStyle: process.env.navigationBarTextStyle
  }

  constructor() {
    super(...arguments)
    this.state = {
      info: {},
      loading: true,
      dataList: [],
      goodsInfo: {}
    }
  }

  componentWillMount() {
    this.getInfo()
  }

  //  分享小程序
  onShareAppMessage() {
    return { title: this.state.info.comment, path: getSharePath() }
  }

  async getInfo() {
    const { params } = this.$router
    const { data } = await getCommentInfo(params.id)
    const { data: { list } } = await getCommentPage({ page: 1, limit: 3, productId: data.productInfo.id })
    this.setState({
      info: data,
      dataList: list,
      goodsInfo: filterGoodsInfo(Object.assign(data.productInfo || {}, data.productSnap)),
    }, () => {
      this.setState({
        loading: false
      })
    })
  }

  render() {
    const { info, loading, dataList, goodsInfo } = this.state

    return (<View className='comment-page'>
      {loading && <Loading/>}
      <ScrollView scrollY className='comment-scroll'>
        <View className='comment-header'>
          <CommentCarousel list={info.pics}/>
        </View>
        <View className='comment-body'>
          <View className='comment-card'>
            {info.id && <CommentItem info={info} showGoods/>}
          </View>

          <View className='comment-card'>
            <View className='card-title'>其他精彩评论</View>
            <View className='newest-list'>
              {dataList.map(item => {
                return (<CommentItem key={item.id} info={item} className='newest-item thin-border__b'/>)
              })}
            </View>
            <View className='load-more'>
              <CommentSeeMore info={info}/>
            </View>
          </View>
        </View>

        <View className='goods-foot--height'/>
      </ScrollView>
      <GoodsFoot
        menus={['home', 'user']}>
        <Button
          disabled={goodsInfo.disabled}
          className='goods-foot__btns-btn xf-btn xf-btn-primary'
          onClick={() => toGoodsPage(goodsInfo)}>{ goodsInfo.disabledText || '立即购买' }</Button>
      </GoodsFoot>
    </View>)
  }
}
